<template>
	<div class="header">
		<Banner :propsbanner='bannerList'></Banner>
		<Icons :propsicons='iconsList'></Icons>
		<Siz :propssiz='sizList'></Siz>
		<Scroll :propsscroll='scrollList'></Scroll>
		<Lb :propslb='lbList'></Lb>
		<Spike :propspike='SpikeList'></Spike>
		<Category></Category>
		<Siji :propssiji='sijiList'></Siji>
		<Aler ></Aler>
		<BottomNav :propsurl='arrUrl'></BottomNav>
	</div>
</template>

<script> 
//引入Banner组件
import Banner from './pages/Banner';
//引入Icons组件
import Icons from './pages/Icons';
//引入Siz组件
import Siz from './pages/Siz';
//引入Scroll组件
import Scroll from './pages/Scroll';
//引入Lb组件
import Lb from './pages/Lb';
//引入Spike组件
import Spike from './pages/Spike';
//引入Spike组件
import Category from './pages/Category';
//引入Siji组件
import Siji from './pages/Siji';
//引入Aler组件
import Aler from './pages/Aler';
//引入Spike组件
import BottomNav from '../default/BottomNav';
//到处组件
export default{
	name:'Home',
	//组件列表的调用
	components:{
		Banner,
		Icons,
		Siz,
		Scroll,
		Lb,
		Spike,
		Category,
		Siji,
		Aler,
		BottomNav,
	},
	data(){
		return{
			arrUrl:[ 
				"bottomimg/db01.png","bottomimg/bd02.png","bottomimg/bd03.png"
			],
			bannerList : [],
			iconsList : [],
			sizList : [],
			scrollList : [],
			lbList : [],
			SpikeList : {},
			sijiList : [],
		}
	},
	// treate：当前组件创建之后【el挂载之前(标签未渲染)，data函数已经完成了初始化】
	// 父组件需要将请求的数据给到子组件的话，满足：1.data的函数已初始化；2.响应数据传给子组件(组件已渲染)
	// mounted：组件挂在之后【如果接口复杂/多个接口的时候，优先考虑mounted】
	created(){
		//备份
		let that = this;
		// 向dataHome.json文件发起异步请求
		this.axios.get('http://localhost:8080/api/dataHome.json').then( (res)=>{
			
			let data = res.data.Homemsg[0];
			//提取banner组件的数据
			that.bannerList = data.BannerVueList;
			//提取icons组件的数据
			that.iconsList = data.iconsVueList;
			//提取siz组件的数据
			that.sizList = data.sizVueList;
			//提取scroll组件的数据
			that.scrollList = data.scrollVueList;
			//提取lb组件的数据
			that.lbList = data.lbVueList;
			// 提取Spike组件的数据
			that.SpikeList = data.SpikeVueList;
			// 提取siji组件的数据
			that.sijiList = data.sijiVueList;
			console.log(that.sijiList);
		}).catch( (error)=>{
			console.log(error);
		});
	}
}
</script>

<style>
</style>
